<template>
  <!-- 重点账号配置 -->
  <h-modal class="event-modal" v-model="show" title="重点账号配置" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="12">
          <a-form-model-item label="定时获取数据的时间间隔" prop="interval">
            <a-select size="large" v-model="form.interval" placeholder="请选择">
              <a-select-option :value="10">10分钟</a-select-option>
              <a-select-option :value="15">15分钟</a-select-option>
              <a-select-option :value="20">20分钟</a-select-option>

              <a-select-option :value="30">30分钟</a-select-option>
              <a-select-option :value="1">1小时</a-select-option>
              <a-select-option :value="2">2小时</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="历史记录时间周期选择" prop="cycleTime">
            <a-select size="large" v-model="form.cycleTime" placeholder="请选择">
              <a-select-option value="1">1</a-select-option>
              <a-select-option value="2">2</a-select-option>
              <a-select-option value="3">3</a-select-option>
              <a-select-option value="4">4</a-select-option>
              <a-select-option value="5">5</a-select-option>
              <a-select-option value="6">6</a-select-option>
              <a-select-option value="7">7</a-select-option>
              <a-select-option value="8">8</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="重点文章获取要求指令" prop="instructions">
            <a-textarea :rows="3" style="width: 100%" size="large" v-model="form.instructions" placeholder="请输入重点文章获取要求指令"></a-textarea>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="第三方公司" prop="companyId">
            <a-select mode="multiple" v-model="companyId" placeholder="请选择" @change="setcompanyId">
              <a-select-option :key="item.id" :value="item.id" v-for="item in componey">{{ item.companyName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="账号发布内容的指令分层">
            <a-switch v-model="form.isLayered"></a-switch>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="普通">
            <a-input size="large" v-model="form.generalLayering" placeholder="请输入普通" ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="中等">
            <a-input size="large" v-model="form.mediumLayering" placeholder="请输入中等" ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="重点">
            <a-input size="large" v-model="form.heavyLayering" placeholder="请输入重点" ></a-input>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { editAccount, detailAccount, getThirdName } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          detailAccount().then(res => {
            this.form = res.data || {};
            this.companyId = res.data.companyId.split(',');
            this.$set(this.form, 'isLayered', !!this.form.isLayered);
          });
          this.getThirdName();
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      companyId: [],
      form: {},
      componey: [],
      rules: {
        interval: [{ required: true, message: '请输入' }],
        cycleTime: [{ required: true, message: '请输入' }],
        instructions: [{ required: true, message: '请输入' }],
        generalLayering: [{ required: true, message: '请输入' }],
        mediumLayering: [{ required: true, message: '请输入' }],
        heavyLayering: [{ required: true, message: '请输入' }],
        companyId: [{ required: true, message: '请选择' }]
      }
    };
  },
  methods: {
    getThirdName() {
      getThirdName().then(res => {
        this.componey = res.data;
      });
    },
    setcompanyId(e) {
      this.$set(this.form, 'companyId', e.join(','));
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.isLayered = this.form.isLayered ? 1 : 0;
          editAccount(this.form).then(res => {
            this.$message.success('创建成功');
            this.show = false;
            this.$emit('submit', cloneDeep(this.form));
            this.form = cloneDeep({});
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style>

</style>
